<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .ui-ribbon .ui-colorpicker .ui-button {
                height: 24px;
            }
            
            .ui-icon.ui-ribbonicon-new {
                margin-left: -10px;
                margin-top: -20px;
                background-image: url("#{resource['demo/images/icon/new.png']}");
            }
            
            .ui-icon.ui-ribbonicon-save {
                background-image: url("#{resource['demo/images/icon/save.png']}");
            }
            
            .ui-icon.ui-ribbonicon-paste {
                background-image: url("#{resource['demo/images/icon/paste.png']}");
            }
            
            .ui-icon.ui-ribbonicon-cut {
                background-image: url("#{resource['demo/images/icon/cut.png']}");
            }
            
            .ui-icon.ui-ribbonicon-print {
                background-image: url("#{resource['demo/images/icon/print.png']}");
            }
            
            .ui-icon.ui-ribbonicon-zoomin {
                background-image: url("#{resource['demo/images/icon/zoomin.png']}");
            }
            
            .ui-icon.ui-ribbonicon-zoomout {
                background-image: url("#{resource['demo/images/icon/zoomout.png']}");
            }
        </style>
	</ui:define>

    <ui:define name="title">
        Ribbon
    </ui:define>

    <ui:define name="description">
         Ribbon is container component to group different sets of controls in a tabbed layout. Special styling is applied to inner components for a unified look.
    </ui:define>

    <ui:param name="documentationLink" value="/components/ribbongroup" />

    <ui:define name="implementation">
        
        <p:ribbon>
            <p:tab title="File">
                <p:ribbonGroup label="Options">
                    <p:commandButton value="New" icon="ui-ribbonicon-new" styleClass="ui-ribbon-bigbutton" type="button"/>
                    <p:commandButton value="Save" icon="ui-ribbonicon-save" styleClass="ui-ribbon-bigbutton" type="button"/>
                </p:ribbonGroup>

                <p:ribbonGroup label="Clipboard" style="width:150px">
                    <p:commandButton value="Paste" icon="ui-ribbonicon-paste" styleClass="ui-ribbon-bigbutton" type="button"/>
                    <p:commandButton value="Cut" icon="ui-ribbonicon-cut" style="width:72px" type="button"/>
                    <p:commandButton value="Print" icon="ui-ribbonicon-print" style="width:72px" type="button"/>
                </p:ribbonGroup>

                <p:ribbonGroup label="Fonts" style="width:220px">
                    <p:selectOneMenu appendTo="@this">
                        <f:selectItem itemLabel="Arial" itemValue="0" />
                        <f:selectItem itemLabel="Comis Sans" itemValue="1" />
                        <f:selectItem itemLabel="Helvetica" itemValue="2" />
                        <f:selectItem itemLabel="Times New Roman" itemValue="3" />
                        <f:selectItem itemLabel="Verdana" itemValue="4" />
                    </p:selectOneMenu>

                    <p:selectOneMenu appendTo="@this">
                        <f:selectItem itemLabel="10" itemValue="10" />
                        <f:selectItem itemLabel="12" itemValue="12" />
                        <f:selectItem itemLabel="14" itemValue="14" />
                        <f:selectItem itemLabel="18" itemValue="18" />
                        <f:selectItem itemLabel="24" itemValue="24" />
                        <f:selectItem itemLabel="36" itemValue="36" />
                        <f:selectItem itemLabel="72" itemValue="72" />
                    </p:selectOneMenu>

                    <p:selectManyButton>
                        <f:selectItem itemLabel="b" itemValue="b" />
                        <f:selectItem itemLabel="u" itemValue="u" />
                        <f:selectItem itemLabel="i" itemValue="i" />
                    </p:selectManyButton>

                    <p:colorPicker />  
                </p:ribbonGroup>
            </p:tab>

            <p:tab title="View">
                <p:ribbonGroup label="Zoom">
                    <p:commandButton value="In" icon="ui-ribbonicon-zoomin" styleClass="ui-ribbon-bigbutton" type="button" />
                    <p:commandButton value="Out" icon="ui-ribbonicon-zoomout" styleClass="ui-ribbon-bigbutton" type="button"/>   
                </p:ribbonGroup>
            </p:tab>
        </p:ribbon>
        
    </ui:define>

    <ui:define name="source">
        <p:tabView>
            <p:tab title="ribbon.xhtml">
                <pre name="code" class="brush:xml">
&lt;p:ribbon&gt;
    &lt;p:tab title="File"&gt;
        &lt;p:ribbonGroup label="Options"&gt;
            &lt;p:commandButton value="New" icon="ui-ribbonicon-new" styleClass="ui-ribbon-bigbutton" type="button"/&gt;
            &lt;p:commandButton value="Save" icon="ui-ribbonicon-save" styleClass="ui-ribbon-bigbutton" type="button"/&gt;
        &lt;/p:ribbonGroup&gt;

        &lt;p:ribbonGroup label="Clipboard" style="width:120px"&gt;
            &lt;p:commandButton value="Paste" icon="ui-ribbonicon-paste" styleClass="ui-ribbon-bigbutton" type="button"/&gt;
            &lt;p:commandButton value="Cut" icon="ui-ribbonicon-cut" style="width:64px" type="button"/&gt;
            &lt;p:commandButton value="Print" icon="ui-ribbonicon-print" style="width:64px" type="button"/&gt;
        &lt;/p:ribbonGroup&gt;

        &lt;p:ribbonGroup label="Fonts" style="width:220px"&gt;
            &lt;p:selectOneMenu appendTo="@this"&gt;
                &lt;f:selectItem itemLabel="Arial" itemValue="0" /&gt;
                &lt;f:selectItem itemLabel="Comis Sans" itemValue="1" /&gt;
                &lt;f:selectItem itemLabel="Helvetica" itemValue="2" /&gt;
                &lt;f:selectItem itemLabel="Times New Roman" itemValue="3" /&gt;
                &lt;f:selectItem itemLabel="Verdana" itemValue="4" /&gt;
            &lt;/p:selectOneMenu&gt;

            &lt;p:selectOneMenu appendTo="@this"&gt;
                &lt;f:selectItem itemLabel="10" itemValue="10" /&gt;
                &lt;f:selectItem itemLabel="12" itemValue="12" /&gt;
                &lt;f:selectItem itemLabel="14" itemValue="14" /&gt;
                &lt;f:selectItem itemLabel="18" itemValue="18" /&gt;
                &lt;f:selectItem itemLabel="24" itemValue="24" /&gt;
                &lt;f:selectItem itemLabel="36" itemValue="36" /&gt;
                &lt;f:selectItem itemLabel="72" itemValue="72" /&gt;
            &lt;/p:selectOneMenu&gt;

            &lt;p:selectManyButton&gt;
                &lt;f:selectItem itemLabel="b" itemValue="b" /&gt;
                &lt;f:selectItem itemLabel="u" itemValue="u" /&gt;
                &lt;f:selectItem itemLabel="i" itemValue="i" /&gt;
            &lt;/p:selectManyButton&gt;

            &lt;p:colorPicker /&gt;  
        &lt;/p:ribbonGroup&gt;
    &lt;/p:tab&gt;

    &lt;p:tab title="View"&gt;
        &lt;p:ribbonGroup label="Zoom"&gt;
            &lt;p:commandButton value="In" icon="ui-ribbonicon-zoomin" styleClass="ui-ribbon-bigbutton" type="button" /&gt;
            &lt;p:commandButton value="Out" icon="ui-ribbonicon-zoomout" styleClass="ui-ribbon-bigbutton" type="button"/&gt;   
        &lt;/p:ribbonGroup&gt;
    &lt;/p:tab&gt;
&lt;/p:ribbon&gt;
                </pre>
            </p:tab>
            
        </p:tabView>

    </ui:define>

</ui:composition>